/*
 * Copyright (C) 2012 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Spacing

## Spacing: Content Box

Content boxes automatically clear their floated children and have default margins.

```html
<div class="content-box border border-trbl">
  Hello
</div>
<div class="content-box border border-trbl">
  Hey, we have space between us
</div>
```

## Sizes Content Box

```html
<div class="content-box-mini border border-trbl">Half spacing</div>
<div class="content-box-mini border border-trbl">Third spacing</div>
```
## Spacing: Pad Box

Use pad-box if you want to arbitrarily add some padding to an element.

## Sizes Pad Box

```html
<div class="pad-box-mega border border-trbl">Mega</div>
<div class="pad-box border border-trbl">Normal</div>
<div class="pad-box-mini border border-trbl">mini</div>
<div class="pad-box-micro border border-trbl">micro</div>
```
*/

[class*='content-box'] {
  clear: both;
  position: relative;
  @include clearfix;
}

.content-box { margin: $spacing-width 0; }
.content-box-mini { margin: $spacing-width/2 0; }
.content-box-micro { margin: $spacing-width/3 0; }

.pad-box { padding: $spacing-width; }
.pad-box-mega { padding: $spacing-width*2; }
.pad-box-mini { padding: $spacing-width/2; }
.pad-box-micro { padding: $spacing-width/4; }

.pad-box, .pad-box-mega, .pad-box-mini, .pad-box-micro {
  &.no-sides {
    padding-left: 0; padding-right: 0;
  }
  &.sides-only {
    padding-top: 0; padding-bottom: 0;
  }
  &.top-only {
    padding-bottom: 0; padding-right: 0; padding-left: 0;
  }
  &.bottom-only {
    padding-top: 0; padding-right: 0; padding-left: 0;
  }
}
